<template>
  <div class="app-container">
    <div class="conn-api-left" :style="{ height: leftHeight }">
      <!-- <nav>API所属应用</nav> -->
      <div class="content">
        <el-input
          placeholder="请输入名称搜索"
          v-model="appNameLike"
          class="input-with-select"
        >
          <template #append>
            <el-button
              icon="el-icon-search"
              :autofocus="true"
              @click="getAllList()"
            ></el-button>
          </template>
        </el-input>
        <div class="conetnt-box">
          <el-button
            :class="{ 'conetnt-btn': true, a: btnVal === index }"
            v-for="(item, index) in applicationList"
            :key="index"
            @click="getAppList(index)"
          >{{ item.appName }}</el-button
          >
        </div>
      </div>
    </div>
    <div class="conn-api-right" ref="rightRef">
      <!-- 顶部查询功能 -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        v-show="showSearch"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="API编码" prop="apiCodeLike">
              <el-input
                v-model="queryParams.apiCodeLike"
                placeholder="请输入API编码"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="API服务名" prop="apiNameLike">
              <el-input
                v-model="queryParams.apiNameLike"
                placeholder="请输入API服务名"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="API类型" prop="apiType">
              <el-radio-group v-model="queryParams.apiType">
                <el-radio key="" label="">全部</el-radio>
                <el-radio
                  v-for="dict in apiTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求路径" prop="apiUrlLike">
              <el-input
                v-model="queryParams.apiUrlLike"
                placeholder="请输入请求路径"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="API状态" prop="apiStatus">
              <el-radio-group v-model="queryParams.apiStatus">
                <el-radio key="" label="">全部</el-radio>
                <el-radio
                  v-for="dict in apiStatusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="2">
            <el-form-item>
              <search-button @click="handleQuery" :perm="['conn:api:search']" />
              <reset-button @click="resetQuery" :perm="['conn:api:search']" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <add-button
          @click="handleAdd"
          :perm="['conn:api:insert']"
          :roleType="['app']"
        />
        <import-button @click="uploadHandler" :perm="['conn:api:import']" />
        <right-toolbar
          :showSearch="showSearch"
          @query-table="getList"
          :perm="['conn:api:search']"
        />
      </el-row>
      <!-- 页面主体表格 -->
      <el-table v-loading="loading" :data="dataList">
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column
          label="接口编码"
          prop="apiCode"
          :show-overflow-tooltip="true"
          min-width="160"
        />
        <el-table-column
          label="接口名称"
          prop="apiName"
          :show-overflow-tooltip="true"
          min-width="160"
        />
        <el-table-column
          label="所属应用"
          prop="appName"
          :show-overflow-tooltip="true"
          min-width="160"
          align="center"
        />
        <el-table-column
          label="接口类型"
          prop="apiType"
          :show-overflow-tooltip="true"
          align="center"
          width="120"
        >
          <template #default="scope">
            <span>{{
              selectDictLabel(apiTypeOptions, scope.row.apiType)+'+'+scope.row.httpRequestMethod
            }}</span>
            <!-- <span>{{ scope.row.apiType === 1 ? 'webservice' : scope.row.apiType === 2 ? 'restful' : 'jms' }}</span> -->
          </template>
        </el-table-column>
        <el-table-column
          label="请求路径"
          prop="apiUrl"
          :show-overflow-tooltip="true"
          min-width="140"
        />
        <el-table-column
          label="默认版本"
          prop="apiMasterVersion"
          width="80"
          align="center"
        >
          <template #default="scope">
            <span>{{ `V${scope.row.apiMasterVersion}` }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="apiStatus"
        >
          <template #default="scope">
            <el-tag v-show="scope.row.apiStatus === '0'" type="success"
            >生效</el-tag>
            <el-tag v-show="scope.row.apiStatus === '1'">暂存</el-tag>
            <el-tag v-show="scope.row.apiStatus === '2'" type="info">停用</el-tag>
            <el-tag v-show="scope.row.apiStatus === '9'" type="info">作废</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          align="center"
          width="170"
        />
        <el-table-column
          label="操作"
          width="300"
          class-name="small-padding fixed-width"
          v-if="hasRoleType(['app'])"
        >
          <template #default="scope">
            <text-release-button
              v-if="scope.row.apiStatus === '1' || scope.row.apiStatus === '2'"
              @click="release(scope.row)"
              :perm="['conn:api:update']"
              :roleType="['app']"
              :title="'是否确认发布记录' + scope.row.apiName + '?'"
              text="发布"
            />
            <text-revoke-button
              v-if="scope.row.apiStatus === '0'"
              @click="revokeClick(scope.row)"
              :perm="['conn:api:update']"
              :roleType="['app']"
              :title="'是否确认撤销记录' + scope.row.apiName + '?'"
              text="撤销"
            />
            <!-- <text-detail-button v-if="scope.row.apiStatus !== 2" @click="testUpdate(scope.row)" :perm="['conn:api:search']"
              :roleType="['app']" text="测试" /> -->
            <text-edit-button
              v-if="scope.row.apiStatus === '1' || scope.row.apiStatus === '9'"
              @click="reviseUpdate(scope.row)"
              :perm="['conn:api:update']"
              :roleType="['app']"
              size="small"
            />
            <!-- <text-detail-button
              @click="handleView(scope.row, 'showVersion')"
              :perm="['conn:api:update']"
              :roleType="['app']"
            /> -->
            <!-- <text-detail-button
              @click="handleExport(scope.row)"
              text="导出"
              :perm="['conn:api:export']"
              :roleType="['app']"
            /> -->
            <text-detail-button
              v-if="
                scope.row.apiStatus === '0' ||
                  scope.row.apiStatus === '2'
              "
              @click="editionClick(scope.row)"
              :perm="['conn:api:search']"
              :roleType="['app']"
              text="版本"
            />
            <text-revoke-button
              v-if="scope.row.apiStatus === '2'"
              @click="handleDiscard(scope.row)"
              text="作废"
              :title="'是否确认作废' + scope.row.apiName + '?'"
              :perm="['conn:api:update']"
            />
            <text-delete-button
              v-if="scope.row.apiStatus === '1' || scope.row.apiStatus === '9'"
              @click="handleDelete(scope.row.apiId, 1)"
              :perm="['conn:api:delete']"
              :roleType="['app']"
              :title="'是否确认删除' + scope.row.apiName + '?'"
            />

            <el-dropdown @command="(command) => handleAction(command,scope.row)" class="ml10 el-button--text">
              <div class="el-dropdown-link" style="font-size:12px;line-height: 24px;color: #409eff">
                更多<el-icon class="el-icon-arrow-down el-icon--right"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="view" icon="el-icon-view" v-hasPermi="['conn:api:search']">详情</el-dropdown-item>
                  <el-dropdown-item command="export" icon="el-icon-download" v-hasPermi="['conn:api:export']">导出</el-dropdown-item>
                  <el-dropdown-item command="exportWSDL" icon="el-icon-download" v-if="scope.row.apiType === '1'" v-hasPermi="['conn:api:export']">下载WSDL文件</el-dropdown-item>
                  <el-dropdown-item command="copy" icon="el-icon-copy-document" v-hasPermi="['conn:api:insert']">复制</el-dropdown-item>
                  <!--                <el-dropdown-item command="view" icon="el-icon-view">详情</el-dropdown-item>-->
                  <!--                <el-dropdown-item command="export" icon="el-icon-download">导出</el-dropdown-item>-->
                  <!--                <el-dropdown-item command="exportWSDL" icon="el-icon-download">下载WSDL文件</el-dropdown-item>-->
                  <!--                <el-dropdown-item command="copy" icon="el-icon-copy-document">复制</el-dropdown-item>-->
                </el-dropdown-menu>
              </template>
            </el-dropdown>


          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 新增或修改对话框 -->
    <el-dialog
      v-el-drag-dialog
      :title="editForm.title"
      :close-on-click-modal="false"
      v-model="editForm.open"
      width="1200px"
      append-to-body
    >
      <el-steps
        :active="editForm.stepIndex"
        align-center
        style="margin-bottom: 20px"
      >
        <el-step
          v-for="(step, index) in steps"
          :key="step.key"
          @click="previousStep(index)"
          style="cursor: pointer"
          :title="step.title"
        ></el-step>
      </el-steps>
      <!-- 基本信息填写 -->
      <div class="dialog-box" v-show="steps[editForm.stepIndex].key === 'JBXX'">
        <el-form
          ref="formRef"
          :model="editForm.data"
          :rules="editForm.rules"
          label-width="135px"
          :disabled="disable"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="API服务名" prop="apiName">
                <el-input
                  v-model="editForm.data.apiName"
                  placeholder="请输入API服务名"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="!editForm.isAdd">
              <el-form-item label="API编码">
                {{ editForm.data.apiCode }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="API描述" prop="apiDesc">
                <el-input
                  v-model="editForm.data.apiDesc"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入内容"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="接口类型" prop="apiType">
                <el-select
                  v-model="editForm.data.apiType"
                  placeholder="请选择接口类型"
                  style="width: 100%"
                  :disabled="upgradeForm.isUpgrade || upgradeForm.isEdit"
                  @change="apiTypeChange"
                >
                  <el-option
                    v-for="item in apiTypeOptions"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属应用" prop="appId">
                <el-select
                  v-model="editForm.data.appId"
                  :disabled="
                    (queryParams.appId &&
                      editForm.data.appId === queryParams.appId) ||
                      upgradeForm.isUpgrade ||
                      upgradeForm.isEdit
                  "
                  placeholder="请选择所属应用"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in applicationOptions"
                    :key="item.appId"
                    :label="item.appName"
                    :value="item.appId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" v-if="editForm.data.apiType !== '3'">
              <el-form-item label="请求方式" prop="httpRequestMethod">
                <el-select
                  v-model="editForm.data.httpRequestMethod"
                  filterable
                  placeholder="请选择请求方式"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in editForm.data.apiType === '1'
                      ? [{ dictValue: '2', dictLabel: 'POST' }]
                      : requestMethodOptions"
                    :key="item.dictLabel"
                    :label="item.dictLabel"
                    :value="item.dictLabel"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="editForm.data.apiType !== '3'">
              <el-form-item label="服务URL" prop="apiUrl">
                <el-input
                  v-model="editForm.data.apiUrl"
                  placeholder="请输入请求路径"
                  clearable
                  @change="handleApiUrlChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="editForm.data.apiType === '1'">
            <el-col :span="12" v-if="editForm.data.apiType === '1'">
              <el-form-item label="WSDL文件">
                <el-row>
                  <el-col :span="19">
                    <el-upload
                      action=""
                      accept=".wsdl"
                      :file-list="fileList"
                      :before-upload="beforeUpload"
                      :http-request="httpRequset"
                      :on-remove="handleRemove"
                    >
                      <el-button icon="el-icon-upload2" size="small"
                      >上传文件(*.wsdl)</el-button>
                    </el-upload>
                  </el-col>
                  <el-col :span="5">
                    <!-- <el-checkbox v-model="editForm.data.checked">自动获取</el-checkbox> -->
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="editForm.data.apiType === '1'">
              <el-row>
                <el-col :span="24" v-if="editForm.data.apiType === '1'">
                  <el-form-item
                    label="服务方法"
                    :prop="editForm.data.apiType === '1' ? 'wsOperation' : ''"
                  >
                    <el-select
                      v-model="editForm.data.wsOperation"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="n in wsOperationList"
                        :key="n"
                        :label="n"
                        :value="n"
                      >
                        {{ n }}
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" v-if="editForm.data.apiType === '1'">
                  <el-form-item
                    label="WSDL来源："
                    prop="'wsdlUrlOrigin"
                  >
                    <el-radio v-model="editForm.data.wsdlUrlOrigin" label="Y">请求时从URL获取</el-radio>
                    <el-radio v-model="editForm.data.wsdlUrlOrigin" label="N">使用上传WSDL文件</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row v-if="editForm.data.apiType === '3'">
            <el-col :span="12">
              <el-form-item label="JMS数据源" prop="jmsDatasourceCode">
                <el-select
                  v-model="editForm.data.jmsDatasourceCode"
                  placeholder="请选择JMS数据源"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in jmsDatasource"
                    :key="item.jmsCode"
                    :label="item.jmsName"
                    :value="item.jmsCode"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="消息类型" prop="jmsType" required>
                <el-radio-group v-model="editForm.data.jmsType">
                  <el-radio label="queue">Queue</el-radio>
                  <el-radio label="topic">Topic</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="editForm.data.apiType === '3'">
            <el-col :span="12">
              <el-form-item :label="editForm.data.jmsType === 'queue' ? 'Queue名称' : 'Topic名称'" prop="jmsDestinationName">
                <el-input
                  v-model="editForm.data.jmsDestinationName"
                  :placeholder="`请输入${editForm.data.jmsType === 'queue' ? 'Queue名称' : 'Topic名称'}`"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="JMS角色" prop="jmsRole" required>
                <el-radio-group v-model="editForm.data.jmsRole">
                  <el-radio label="C">消费者</el-radio>
                  <el-radio label="P">生产者</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预警响应时间" prop="alarmSecs">
                <el-input
                  v-model="editForm.data.alarmSecs"
                  placeholder="请输入预警响应时间"
                  :min="0"
                  type="number"
                >
                  <template>秒</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="16">
                  <el-form-item label="超时时间" prop="timeoutSecs">
                    <el-input
                      v-model="editForm.data.timeoutSecs"
                      placeholder="请输入超时时间"
                      :min="0"
                      type="number"
                    >
                      <template>秒</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="tips">(0表示采用平台默认控制)</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="16">
                  <el-form-item label="失败重试次数" prop="retryTimes">
                    <el-input
                      v-model="editForm.data.retryTimes"
                      placeholder="请输入失败重试次数"
                      :min="0"
                      type="number"
                    >
                      <template>次</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="tips">(0表示不重试)</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <div
            style="width: 100%; height: 1px; background-color: #b4bccc"
          ></div>
        </el-form>
      </div>
      <!-- 请求头 -->
      <div class="dialog-box" v-show="steps[editForm.stepIndex].key === 'QQT'">
        <div class="qqt-title">
          <span class="label">请求头参数</span>
          <el-icon
            v-if="!disable"
            class="el-icon-plus text-success add"
            @click="qqtAdd({}, 'req', '新增请求头参数')"
          ><Plus /></el-icon>
        </div>
        <el-table
          v-loading="SearchLoading"
          :data="reqHeaderList"
          style="margin: 10px 0"
          :disabled="disable"
        >
          <el-table-column label="参数名" prop="nodeName" width="150" />
          <el-table-column
            label="参数描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="150"
          />
          <el-table-column label="参数类型" prop="nodeType" width="150">
            <template #default="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否必须" prop="nodeNeededable">
            <template #default="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeNeededable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column label="是否必填" prop="nodeValueable">
            <template #default="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeValueable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="校验规则"
            prop="nodeCheckRegex"
            :show-overflow-tooltip="true"
            min-width="200"
          />
          <el-table-column
            label="操作"
            class-name="small-padding fixed-width"
            v-if="hasRoleType(['app']) && !disable"
            width="220"
          >
            <template #default="scope">
              <text-edit-button
                @click="qqtModify(scope.row, 'req', '编辑请求头参数')"
              />
              <text-delete-button
                :title="'是否确认删除' + scope.row.nodeName + '?'"
                @click="handleQqtDelete(scope.row.headerId, 'req')"
              />
            </template>
          </el-table-column>
        </el-table>
        <div class="qqt-title">
          <span class="label">响应头参数</span>
          <el-icon
            v-if="!disable"
            class="el-icon-plus text-success add"
            @click="qqtAdd({}, 'res', '新增响应头参数')"
          ><Plus /></el-icon>
        </div>
        <el-table
          v-loading="SearchLoading"
          :data="resHeaderList"
          style="margin: 10px 0"
          :disabled="disable"
        >
          <el-table-column label="参数名" prop="nodeName" width="150" />
          <el-table-column
            label="参数描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="200"
          />
          <el-table-column label="参数类型" prop="nodeType" width="150">
            <template #default="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否必须"
            prop="nodeNeededable"
            :show-overflow-tooltip="true"
            min-width="150"
          >
            <template #default="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeNeededable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            class-name="small-padding fixed-width"
            v-if="hasRoleType(['app']) && !disable"
            width="220"
          >
            <template #default="scope">
              <text-edit-button
                @click="qqtModify(scope.row, 'res', '编辑响应头参数')"
              />
              <text-delete-button
                :title="'是否确认删除' + scope.row.nodeName + '?'"
                @click="handleQqtDelete(scope.row.headerId, 'res')"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 输入参数 -->
      <div class="dialog-box" v-show="steps[editForm.stepIndex].key === 'SRCS'">
        <el-row v-if="!disable" type="flex" align="middle">
          <el-col :span="12">
            <add-button
              @click="inputAdd({}, 'in', '新增输入参数')"
              :perm="['conn:api:insert']"
              :roleType="['app']"
              :disabled="disable"
            />            
            <el-dropdown @command="inParamQuickInsertHandler" class="ml-4">
              <el-button type="primary" icon="Plus" v-hasPermi="['conn:api:insert']" v-hasRoleType="['app']">
                快速添加<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="batchInsert">批量新增</el-dropdown-item>
                  <el-dropdown-item command="pageParam">添加分页参数</el-dropdown-item>
                  <el-dropdown-item command="modelEntity">选择模型实体</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <el-col :span="6">
            <span>参数形式：</span>
            <el-radio-group v-model="apiParamsBody">
              <el-radio label="1">Raw</el-radio>
              <el-radio label="2">FormData</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="6">
            <span>支持参数属性：</span>
            <el-switch v-model="inparamWithAttr" active-color="#13ce66">
            </el-switch>
          </el-col>
        </el-row>
        <el-table
          v-loading="SearchLoading"
          :data="inputList"
          style="margin-top: 10px"
          row-key="nodeId"
          default-expand-all
          :disabled="disable"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            label="参数名"
            prop="nodeName"
            :show-overflow-tooltip="true"
            min-width="100"
          >
            <template #default="scope">
              <div style="display: inline-block">
                <span>{{ scope.row.nodeName }}</span>
                <el-tag size="mini" v-if="scope.row.isAttr === 'Y'"
                >属性</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="参数描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="参数别名"
            prop="nodeAlias"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column label="参数类型" prop="nodeType" width="140">
            <template #default="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否必须"
            align="center"
            prop="nodeNeededable"
            width="80"
          >
            <template #default="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeNeededable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="是否必填"
            align="center"
            prop="nodeValueable"
            width="80"
          >
            <template #default="scope">
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeValueable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="校验规则"
            prop="nodeCheckRegex"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="操作"
            class-name="small-padding fixed-width"
            v-if="hasRoleType(['app']) && !disable"
            width="220"
          >
            <template #default="scope">
              <text-add-button
                v-if="inparamWithAttr && scope.row.isAttr !== 'Y'"
                text="属性"
                @click="inputAdd(scope.row, 'in', '新增输入参数-属性', true)"
                :perm="['conn:api:insert']"
                :roleType="['conf']"
              />
              <text-add-button
                v-if="scope.row.nodeType === 'object'"
                text="子节点"
                @click="inputAdd(scope.row, 'in', '新增输入参数', false)"
                :perm="['conn:api:insert']"
                :roleType="['conf']"
              />
              <text-edit-button
                @click="modify(scope.row, 'in', '修改输入参数')"
                :perm="['conn:api:update']"
                :roleType="['app']"
              />
              <text-delete-button
                @click="handleDelete(scope.row.nodeId, 2)"
                :perm="['conn:api:delete']"
                :roleType="['app']"
                :title="`是否确认删除记录[${scope.row.nodeLabel}(${scope.row.nodeName})]?`"
              />
            </template>
          </el-table-column>
        </el-table>
          <!-- 新增或修改对话框 -->
    <el-dialog
      v-el-drag-dialog :title="modelEntityForm.title" :close-on-click-modal="false" v-model="modelEntityForm.open"
      width="50%" append-to-body>
      <el-form ref="modelEntityFormRef" :model="modelEntityForm.data" :rules="modelEntityForm.rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="实体模型" prop="entityId">
              <el-select v-model="modelEntityForm.data.entityId" placeholder="请选择实体模型" :disabled="modelEntityForm.isModify">
                <el-option
                  v-for="(op, index) in modelEntityList" :key="index" :label="op.entityName + '-' +op.entityDesc"
                  :value="op.entityId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <dialog-footer @ok="inParamInsertModelParam" @cancel="cancelModelEntity" />
      </template>
    </el-dialog>
      </div>
      <!-- 输出参数 -->
      <div class="dialog-box" v-show="steps[editForm.stepIndex].key === 'SCCS'">
        <el-row v-if="!disable" type="flex" align="middle">
          <el-col :span="12">
            <add-button
              @click="inputAdd({}, 'out', '新增输出参数')"
              :perm="['conn:api:insert']"
              :roleType="['app']"
              :disabled="disable"
            />
            <el-dropdown @command="outParamQuickInsertHandler" class="ml-4">
              <el-button type="primary" icon="Plus" v-hasPermi="['conn:api:insert']" v-hasRoleType="['app']">
                快速添加<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="batchInsert">批量新增</el-dropdown-item>
                  <el-dropdown-item command="restDomainString">添加Anvil结构(字符串)</el-dropdown-item>
                  <el-dropdown-item command="restDomainLong">添加Anvil结构(整数)</el-dropdown-item>
                  <el-dropdown-item command="restDomainDecimal">添加Anvil结构(小数)</el-dropdown-item>
                  <el-dropdown-item command="restDomainBoolean">添加Anvil结构(布尔)</el-dropdown-item>
                  <el-dropdown-item command="restDomainObject">添加Anvil结构(对象)</el-dropdown-item>
                  <el-dropdown-item command="restDomainArray">添加Anvil结构(数组)</el-dropdown-item>
                  <el-dropdown-item command="restDomainPage">添加Anvil结构(分页)</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <el-col :span="12">
            <span>支持参数属性：</span>
            <el-switch v-model="outparamWithAttr" active-color="#13ce66">
            </el-switch>
          </el-col>
        </el-row>
        <el-table
          v-loading="insertLoading"
          :data="insertList"
          style="margin-top: 10px"
          row-key="nodeId"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :disabled="disable"
        >
          <el-table-column
            label="参数名"
            prop="nodeName"
            :show-overflow-tooltip="true"
            min-width="100"
          >
            <template #default="scope">
              <div style="display: inline-block">
                <span>{{ scope.row.nodeName }}</span>
                <el-tag size="mini" v-if="scope.row.isAttr === 'Y'"
                >属性</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="参数描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column label="参数类型" prop="nodeType" width="140">
            <template #default="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否必须"
            align="center"
            prop="nodeNeededable"
            width="80"
          >
            <template #default="scope">
              <yes-no-tag :value="scope.row.nodeNeededable || ''" />
            </template>
          </el-table-column>
          <el-table-column
            label="成功标识"
            align="center"
            prop="isSuccessFlag"
            width="80"
          >
            <template #default="scope">
              <yes-no-tag :value="scope.row.isSuccessFlag || ''" />
            </template>
          </el-table-column>
          <el-table-column
            label="成功的值"
            align="center"
            prop="successValue"
            min-width="80"
          />
          <el-table-column
            label="操作"
            class-name="small-padding fixed-width"
            v-if="hasRoleType(['app']) && !disable"
            width="220"
          >
            <template #default="scope">
              <text-add-button
                v-if="outparamWithAttr && scope.row.isAttr !== 'Y'"
                text="属性"
                @click="inputAdd(scope.row, 'out', '新增输出参数-属性', true)"
                :perm="['conn:api:insert']"
                :roleType="['conf']"
              />
              <text-add-button
                v-if="scope.row.nodeType === 'object'"
                text="子节点"
                @click="inputAdd(scope.row, 'out', '新增输出参数', false)"
                :perm="['conn:api:insert']"
                :roleType="['conf']"
              />
              <text-edit-button
                @click="modify(scope.row, 'out', '修改输出参数')"
                :perm="['conn:api:update']"
                :roleType="['app']"
              />
              <text-delete-button
                @click="handleDelete(scope.row.nodeId, 3)"
                :perm="['conn:api:delete']"
                :roleType="['app']"
                :title="`是否确认删除记录[${scope.row.nodeLabel}(${scope.row.nodeName})]?`"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 测试/发布 -->
      <div class="dialog-box" v-show="steps[editForm.stepIndex].key === 'CSFB'">
        <el-form label-width="120px" :disabled="disable">
          <el-row>
            <el-col :span="8">
              <el-form-item label="API服务名：">
                <span>{{ editForm.data.apiName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="请求方式：">
                <span>{{ editForm.data.httpRequestMethod }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="API编码：">
                <span>{{ editForm.data.apiCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="服务URL：">
                <span>{{ editForm.data.apiUrl }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--        <el-table-->
        <!--          :data="inputList"-->
        <!--          style="margin-top: 10px"-->
        <!--          row-key="nodeId"-->
        <!--          default-expand-all-->
        <!--          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"-->
        <!--          :disabled="disable"-->
        <!--        >-->
        <!--          <el-table-column label="序号" type="index" />-->
        <!--          <el-table-column-->
        <!--            label="参数名"-->
        <!--            prop="nodeName"-->
        <!--            :show-overflow-tooltip="true"-->
        <!--            min-width="100"-->
        <!--          >-->
        <!--            <template v-slot="scope">-->
        <!--              <div style="display: inline-block">-->
        <!--                <span>{{ scope.row.nodeName }}</span>-->
        <!--                <el-tag size="mini" v-if="scope.row.isAttr === 'Y'"-->
        <!--                  >属性</el-tag-->
        <!--                >-->
        <!--              </div>-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--            label="描述"-->
        <!--            prop="nodeLabel"-->
        <!--            :show-overflow-tooltip="true"-->
        <!--            min-width="100"-->
        <!--          />-->
        <!--          <el-table-column label="参数类型" prop="nodeType" width="140">-->
        <!--            <template v-slot="scope">-->
        <!--              <span>{{-->
        <!--                selectDictLabel(nodeTypeList, scope.row.nodeType)-->
        <!--              }}</span>-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--            label="是否必须"-->
        <!--            align="center"-->
        <!--            prop="nodeNeededable"-->
        <!--            width="80"-->
        <!--          >-->
        <!--            <template v-slot="scope">-->
        <!--              <yes-no-tag-->
        <!--                yesText="是"-->
        <!--                noText="否"-->
        <!--                :value="scope.row.nodeNeededable || ''"-->
        <!--              />-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--            label="是否必填"-->
        <!--            align="center"-->
        <!--            prop="nodeValueable"-->
        <!--            width="80"-->
        <!--          >-->
        <!--            <template v-slot="scope">-->
        <!--              <yes-no-tag-->
        <!--                yesText="是"-->
        <!--                noText="否"-->
        <!--                :value="scope.row.nodeValueable || ''"-->
        <!--              />-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--          <el-table-column-->
        <!--            label="校验规则"-->
        <!--            prop="nodeCheckRegex"-->
        <!--            :show-overflow-tooltip="true"-->
        <!--            min-width="100"-->
        <!--          />-->
        <!--          <el-table-column-->
        <!--            label="测试值"-->
        <!--            prop="nodeValueable"-->
        <!--            :show-overflow-tooltip="true"-->
        <!--            min-width="100"-->
        <!--          >-->
        <!--            <template v-slot="scope">-->
        <!--              <el-input-->
        <!--                v-if="scope.row.nodeType !== 'object'"-->
        <!--                v-model="scope.row[scope.row.nodeName]"-->
        <!--              ></el-input>-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--        </el-table>-->

        <div style="width:100%;margin-top: 10px">
          <span class="title" style=" color: #707070;font-weight: 700;margin-bottom: 5px">入参配置：</span>

          <Editor
            style="height: 200px;overflow-y: hidden"
            v-model="editorValue"
            :defaultConfig="editorConfig"
            :mode="mode"
            @on-created="onCreated"
          />

          <br>
          <el-button
            type="primary" size="mini"
            @click="checkJson">调试</el-button>
        </div>


        <!-- <el-button type="primary" @click="submitForm" style="margin-top: 20px"
          >发送请求</el-button
        > -->
        <el-input
          type="textarea"
          :rows="3"
          placeholder="运行结果"
          v-model="operationResults"
          style="margin-top: 20px"
          :disabled="disable"
        >
        </el-input>
      </div>
      <span class="dialog-footer">
        <el-button @click="cancel('editForm')">取 消</el-button>
        <el-button v-if="!disable" type="primary" @click="nextStep(1)"
        >暂存</el-button
        >
        <el-button
          v-show="editForm.stepIndex !== steps.length - 1"
          type="primary"
          @click="nextStep(2)"
        >下一步</el-button
        >
        <el-button
          v-if="!disable"
          v-show="editForm.stepIndex === steps.length - 1"
          type="primary"
          @click="release()"
        >发 布</el-button
        >
      </span>
    </el-dialog>

    <!-- 输入/输出参数新增对话框 -->
    <el-dialog
      v-el-drag-dialog
      :title="inputForm.title"
      :close-on-click-modal="false"
      v-model="inputForm.open"
      width="800px"
      append-to-body
    >
      <!-- <div class="open-nav">
        <div class="blue-box"></div>
        基本信息填写
      </div> -->
      <el-form
        ref="inputformRef"
        :model="inputForm.data"
        :rules="inputForm.rules"
        label-width="90px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属参数">
              <el-input v-model="inputForm.parentNode" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              :label="inputForm.isAttr ? '属性名' : '参数名'"
              prop="nodeName"
            >
              <el-input
                v-model="inputForm.data.nodeName"
                placeholder="请输入参数名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="inputForm.isAttr ? '属性描述' : '参数描述'"
              prop="nodeLabel"
            >
              <el-input
                v-model="inputForm.data.nodeLabel"
                placeholder="请输入参数描述"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="inputForm.state==='in'">
          <el-col :span="24">
            <el-form-item
              :label="inputForm.isAttr ? '属性别名' : '参数别名'"
              prop="nodeAlias"
            >
              <el-input
                v-model="inputForm.data.nodeAlias"
                placeholder="请输入参数别名（多个以逗号隔开）"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="inputForm.isAttr ? '属性类型' : '参数类型'"
              prop="nodeType"
            >
              <!-- <el-select v-model="inputForm.data.nodeType" filterable placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in nodeTypeList" :key="item.dictLabel" :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select> -->
              <dict-selector
                v-model="inputForm.data.nodeType"
                :dictData="inputForm.isAttr ? qqtNodeTypeList : nodeTypeList"
                placeholder="请选择参数类型"
                clearable

                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="inputForm.data.nodeType === 'array'">
          <el-col :span="24">
            <el-form-item label="元素类型" prop="elementType">
              <el-select
                v-model="inputForm.data.elementType"
                filterable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in elementTypeList"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          v-if="
            inputForm.data.nodeType === 'string' ||
              inputForm.data.elementType === 'string'
          "
        >
          <el-col :span="24">
            <el-form-item
              label="校验规则"
              prop="nodeCheckRegex"
              v-if="steps[editForm.stepIndex].key === 'SRCS'"
            >
              <el-input
                v-model="inputForm.data.nodeCheckRegex"
                placeholder="请输入接口名称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否必须" prop="nodeNeededable">
              <el-switch
                v-model="inputForm.data.nodeNeededable"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="steps[editForm.stepIndex].key === 'SRCS'">
            <el-form-item label="是否必填" prop="nodeValueable">
              <el-switch
                v-model="inputForm.data.nodeValueable"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="steps[editForm.stepIndex].key === 'SCCS'">
          <el-col :span="12">
            <el-form-item label="成功标识" prop="isSuccessFlag">
              <el-switch
                v-model="inputForm.data.isSuccessFlag"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="inputForm.data.isSuccessFlag === true">
            <el-form-item label="成功的值" prop="successValue">
              <el-input
                v-model="inputForm.data.successValue"
                placeholder="接口执行成功时该字段的值"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <dialog-footer
        @ok="submitInputForm"
        @cancel="cancel('inputForm')"
      />
    </el-dialog>

    <!-- 批量新增输入参数 -->
    <batch-add-params
      title="批量新增输入参数"
      :batchVisible="batchInVisible"
      @on-ok="(val) => onBatchOk('in', val)"
    />
    <!-- 批量新增输出参数 -->
    <batch-add-params
      title="批量新增输出参数"
      :batchVisible="batchOutVisible"
      @on-ok="val => onBatchOk('out', val)"
    />

    <!-- 新增请求头/响应头 -->
    <el-dialog
      v-el-drag-dialog
      :title="qqtForm.title"
      :close-on-click-modal="false"
      v-model="qqtForm.open"
      width="800px"
      append-to-body
    >
      <el-form
        ref="qqtformRef"
        :model="qqtForm.data"
        :rules="qqtForm.rules"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="参数名" prop="nodeName">
              <el-input
                v-model="qqtForm.data.nodeName"
                placeholder="请输入参数名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数描述" prop="nodeLabel">
              <el-input
                v-model="qqtForm.data.nodeLabel"
                placeholder="请输入参数描述"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="参数类型" prop="nodeType">
              <dict-selector
                v-model="qqtForm.data.nodeType"
                :dictData="qqtNodeTypeList"
                placeholder="请选择参数类型"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="qqtForm.data.nodeType === 'string'">
          <el-col :span="24">
            <el-form-item
              label="校验规则"
              prop="nodeCheckRegex"
              v-if="qqtForm.state === 'req'"
            >
              <el-input
                v-model="qqtForm.data.nodeCheckRegex"
                placeholder="请输入接口名称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否必须" prop="nodeNeededable">
              <el-switch
                v-model="qqtForm.data.nodeNeededable"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="qqtForm.state === 'req'">
            <el-form-item label="是否必填" prop="nodeValueable">
              <el-switch
                v-model="qqtForm.data.nodeValueable"
                active-color="#13ce66"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <dialog-footer
        @ok="submitQqtForm"
        @cancel="cancel('qqtForm')"
      />
    </el-dialog>

    <!-- 测试对话框 -->
    <el-dialog
      v-el-drag-dialog
      :title="testForm.title"
      :close-on-click-modal="false"
      v-model="testForm.open"
      width="800px"
      append-to-body
    >
      <div class="dialog-box">
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="API服务名：">
                <span>{{ editForm.data.apiName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="请求方式：">
                <span>{{ editForm.data.apiType }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="API编码：">
                <span>{{ editForm.data.apiCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="服务URL：">
                <span>{{ editForm.data.apiUrl }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          :data="inputList"
          style="margin-top: 10px"
          row-key="nodeId"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column label="序号" type="index" />
          <el-table-column
            label="参数名"
            prop="nodeName"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="描述"
            prop="nodeLabel"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column label="参数类型" prop="nodeType" width="140">
            <template #default="scope">
              <span>{{
                selectDictLabel(nodeTypeList, scope.row.nodeType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否必须"
            prop="nodeNeededable"
            width="80"
            align="center"
          >
            <template #default="scope">
              <!-- <span>{{ scope.row.nodeNeededable === 'Y' ? '是' : '否' }}</span> -->
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeNeededable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="是否必填"
            prop="nodeValueable"
            width="80"
            align="center"
          >
            <template #default="scope">
              <!-- <span>{{ scope.row.nodeValueable === 'Y' ? '是' : '否' }}</span> -->
              <yes-no-tag
                yesText="是"
                noText="否"
                :value="scope.row.nodeValueable || ''"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="校验规则"
            prop="nodeCheckRegex"
            :show-overflow-tooltip="true"
            min-width="100"
          />
          <el-table-column
            label="测试值"
            :show-overflow-tooltip="true"
            min-width="100"
          >
            <template #default="scope">
              <el-input
                v-if="scope.row[scope.row.nodeType] !== 'object'"
                v-model="scope.row[scope.row.nodeName]"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-button type="primary" @click="submitForm" style="margin-top: 20px;">发送请求</el-button> -->
        <el-input
          type="textarea"
          :rows="2"
          placeholder="运行结果"
          v-model="operationResults"
          style="margin-top: 20px"
        >
        </el-input>
      </div>
      <span class="dialog-footer">
        <el-button @click="cancel('testForm')">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 升级API接口对话框 -->
    <el-dialog
      v-el-drag-dialog
      :title="upgradeForm.title"
      :close-on-click-modal="false"
      v-model="upgradeForm.open"
      width="1200px"
      append-to-body
    >
      <el-form
        ref="upgradeFormRef"
        :model="upgradeForm.data"
        :rules="upgradeForm.rules"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="接口名称">
              <el-input
                v-model="upgradeForm.data.apiName"
                placeholder="请输入参数名"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口编码">
              <el-input v-model="upgradeForm.data.apiCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口版本">
              <el-input
                v-model="upgradeForm.data.apiVersion"
                placeholder="请输入参数描述"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属应用">
              <el-input
                v-model="upgradeForm.data.appName"
                placeholder="请输入参数描述"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务URL" prop="apiUrl">
              <el-input
                v-model="upgradeForm.data.apiUrl"
                placeholder="请输入接口名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求方式" prop="httpRequestMethod">
              <el-select
                v-model="upgradeForm.data.httpRequestMethod"
                filterable
                placeholder="请选择请求方式"
                style="width: 100%"
              >
                <el-option
                  v-for="item in requestMethodOptions"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="升级说明" prop="apiVerDesc">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入升级说明"
            v-model="upgradeForm.data.apiVerDesc"
          />
        </el-form-item>
      </el-form>
      <dialog-footer
        @ok="submitUpgradeForm"
        @cancel="cancel('upgradeForm')"
      />
    </el-dialog>

    <!-- 查看API接口版本对话框 -->
    <el-dialog
      v-el-drag-dialog
      :title="editionForm.title"
      :close-on-click-modal="false"
      v-model="editionForm.open"
      width="1200px"
      append-to-body
    >
      <el-form :model="editionForm.data" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="API名称">
              <el-input v-model="editionForm.data.apiName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="API编码">
              <el-input v-model="editionForm.data.apiCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属应用">
              <el-input v-model="editionForm.data.appName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="editionForm.loading" :data="editionForm.list">
        <!-- <el-table-column label="序号" type="index" width="55" align="center" /> -->
        <el-table-column label="版本号" prop="apiVersion" width="110">
          <template #default="scope">
            <div style="display: flex">
              <span>{{ `V${scope.row.apiVersion}` }}</span>
              <el-tag
                size="mini"
                v-if="
                  editionForm.data.apiMasterVersion === scope.row.apiVersion
                "
              >主</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="服务URL"
          prop="apiUrl"
          :show-overflow-tooltip="true"
          min-width="100"
        />
        <el-table-column
          label="版本描述"
          prop="apiVerDesc"
          :show-overflow-tooltip="true"
          min-width="100"
        />
        <!-- <el-table-column label="接口类型" prop="apiType" width="80">
          <template v-slot="scope">
            <span>{{ selectDictLabel(apiTypeOptions, scope.row.apiType) }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="请求方式" prop="httpRequestMethod" width="80" />
        <el-table-column
          label="状态"
          align="center"
          prop="apiVerStatus"
          width="80"
        >
          <template #default="scope">
            <el-tag v-show="scope.row.apiVerStatus === '0'" type="success"
            >生效</el-tag
            >
            <el-tag v-show="scope.row.apiVerStatus === '1'">暂存</el-tag>
            <el-tag v-show="scope.row.apiVerStatus === '2'" type="info"
            >停用</el-tag
            >
            <el-tag v-show="scope.row.apiVerStatus === '9'" type="info"
            >作废</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="更新者"
          align="center"
          prop="updateBy"
          width="100"
        />
        <el-table-column
          label="更新时间"
          prop="updateTime"
          :show-overflow-tooltip="true"
          min-width="100"
        />
        <el-table-column
          label="操作"
          width="300"
          class-name="small-padding fixed-width"
          v-if="hasRoleType(['app'])"
        >
          <template #default="scope">
            <text-detail-button
              @click="handleView(scope.row)"
              :perm="['conn:api:search']"
              :roleType="['app']"
            />
            <!-- <text-detail-button
              @click="testUpdate(scope.row)"
              :perm="['conn:api:search']"
              :roleType="['app']"
              text="测试"
            /> -->
            <text-revoke-button
              v-if="scope.row.apiVerStatus === '0'"
              @click="revokeClick(scope.row)"
              :perm="['conn:api:update']"
              :roleType="['app']"
              :title="'是否确认撤销版本' + scope.row.apiVersion + '?'"
            />
            <text-release-button
              v-if="scope.row.apiVerStatus !== '0'"
              @click="release(scope.row, true)"
              :perm="['conn:api:update']"
              :roleType="['app']"
              :title="'是否确认发布版本' + scope.row.apiVersion + '?'"
            />
            <text-edit-button
              v-if="scope.row.apiVerStatus === '1'"
              @click="editVersion(scope.row, true)"
              :perm="['conn:api:update']"
              :roleType="['app']"
              text="修改"
            />
            <text-disable-button
              v-if="
                scope.row.apiVerStatus === '0' &&
                  editionForm.data.apiMasterVersion !== scope.row.apiVersion
              "
              :perm="['conn:api:update']"
              :roleType="['app']"
              @click="masterClick(scope.row, true)"
              text="设为默认"
              :title="'是否确认将版本' + scope.row.apiVersion + '设为默认?'"
            />
            <text-delete-button
              v-if="scope.row.apiVerStatus === '1'"
              @click="
                handleDelete(
                  { apiId: scope.row.apiId, apiVersion: scope.row.apiVersion },
                  4
                )
              "
              :perm="['conn:api:delete']"
              :roleType="['app']"
              :title="'是否确认删除版本' + scope.row.apiVersion + '?'"
            />
            <text-detail-button
              v-if="scope.row.apiVerStatus !== '1'"
              @click="upgradeVersion(scope.row)"
              :perm="['conn:api:search']"
              :roleType="['app']"
              text="升级"
            />
            <text-revoke-button
              v-if="scope.row.apiVerStatus === '2'"
              @click="handleDiscard(scope.row)"
              :perm="['conn:api:update']"
              text="作废"
              :title="'是否确认作废版本' + scope.row.apiVerStatus + '?'"
            />
          </template>
        </el-table-column>
      </el-table>
      <dialog-footer
        @ok="submitUpgradeForm"
        :showOk="false"
        @cancel="cancel('editionForm')"
      />
    </el-dialog>

    <el-dialog
      title="查看详情"
      :close-on-click-modal="false"
      v-model="viewVisible"
      width="1000px"
      append-to-body
    >
      <row-detail
        :visible="viewVisible"
        :rowInfo="rowInfo"
        :showVersion="showVersion"
      />
      <dialog-footer
        :showOk="false"
        @cancel="viewVisible = false"
      />
    </el-dialog>

    <!-- 上传API信息-->
    <el-dialog :title="upload.title" :close-on-click-modal="false" v-model="upload.open" width="600px" append-to-body>
      <el-upload
        ref="upload" :limit="1" accept=".zip" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color: red">
          选择zip格式的压缩文件（通过其他环境导出的**-Api-Domain.zip压缩包）
        </div>
        <div class="el-upload__tip" style="color: red">
          例：能力清单查询接口(DEFAULT000037)-Api-Domain.zip
        </div>
      </el-upload>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAppAll } from "@/platform/uni/api/uni/app/info/index.js";
import * as api from "@/api/conn/api/index.js";
import { debounceWrapper } from "@/utils/zmids.ts";
import RowDetail from "./row-detail.vue";
import BatchAddParams from './components/batch-add-params.vue'
import {Base64} from 'js-base64';
import { Editor } from '@wangeditor/editor-for-vue'
import {selectAllParentEntity} from "@/platform/uni/api/uni/domain/index.ts";
import defaultSettings from '@/settings'
import { getToken } from '@/utils/auth';

export default {
  // 此处的名字需要与菜单中Path一致，否则多Tab页切换时会刷新
  name: "ConnApi",
  components: { RowDetail, BatchAddParams, Editor },
  data() {
    return {
      // 实体列表
      modelEntityList: [],
      modelEntityForm: {
        // 控制 dialog
        open: false,
        // 弹出层标题
        title: '',
        // 是否修改操作
        isModify: false,
        // 表单参数
        data: {},
        // 规则
        rules: {
          // 数据源
          entityId: [
            { required: true, message: '数据源不可以为空', trigger: 'blur' }
          ],
        },
      },
      hasJsonFlag: true, // json是否验证通过
      editorValue: '{key:"value"}',
      lineNumbers: true, // true为编辑模式， false只展示不可编辑
      steps: [
        { key: "JBXX", title: "基本信息" },
        { key: "QQT", title: "请求头" },
        { key: "SRCS", title: "输入参数" },
        { key: "SCCS", title: "输出参数" },
        { key: "CSFB", title: "测试/发布" },
      ],
      batchInVisible: false,
      batchOutVisible: false,
      // 接口获取行详情
      rowInfo: {},
      // 查看详情弹框
      viewVisible: false,
      // 详情tab是否显示版本
      showVersion: true,
      // 运行结果
      operationResults: "",
      disable: false,
      value: true,
      btnVal: 0,
      // 左侧应用栏列表
      applicationList: [],
      // 遮罩层
      loading: false,
      allLoading: false,
      //输入表格遮罩层
      SearchLoading: false,
      //输出表格遮罩层
      insertLoading: false,
      // 输入表格数据
      inputList: [],
      apiParamsBody: "1",
      // 输入表格支持参数属性
      inparamWithAttr: false,
      // 输出表格数据
      insertList: [],
      // 请求头表格
      reqHeaderList: [],
      // 响应头表格
      resHeaderList: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 输出表格数据
      outputList: [],
      // 输出表格支持参数属性
      outparamWithAttr: false,
      // 所属应用可选列表
      applicationOptions: [],
      // 服务方法
      wsOperationList: [],
      // 参数类型选项
      nodeTypeList: [
        { dictValue: "string", dictLabel: "字符串 (String)" },
        { dictValue: "long", dictLabel: "整数 (Long)" },
        { dictValue: "decimal", dictLabel: "小数 (Decimal)" },
        { dictValue: "object", dictLabel: "对象 (Object)" },
        { dictValue: "array", dictLabel: "数组 (Array)" },
      ],
      qqtNodeTypeList: [
        { dictValue: "string", dictLabel: "字符串 (String)" },
        { dictValue: "long", dictLabel: "整数 (Long)" },
        { dictValue: "decimal", dictLabel: "小数 (Decimal)" },
      ],
      elementTypeList: [],
      // API类型的固定字典选项列表
      apiTypeOptions: [],
      // 可选接口请求方式
      requestMethodOptions: [
        { dictValue: "1", dictLabel: "GET" },
        { dictValue: "2", dictLabel: "POST" },
      ],
      // API状态的固定字典选项列表
      apiStatusOptions: [
        { dictValue: "0", dictLabel: "生效" },
        { dictValue: "1", dictLabel: "暂存" },
        { dictValue: "2", dictLabel: "停用" },
      ],
      // 是否删除的固定字典选项列表
      deleteFlagOptions: [
        { dictValue: "Y", dictLabel: "是" },
        { dictValue: "N", dictLabel: "否" },
      ],
      jmsDatasource: [],
      // 右侧查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // API编码
        apiCodeLike: "",
        // API服务名
        apiNameLike: "",
        // API类型
        apiType: "",
        // url
        apiUrlLike: "",
        // API状态
        apiStatus: "",
      },
      //左侧应用列表查询参数
      appNameLike: "",
      leftHeight: "auto",
      // 新增/修改弹窗s
      editForm: {
        // 步骤控制
        stepIndex: 0,
        // 当前最大步骤
        maxIndex: 0,
        // 控制 dialog
        open: false,
        // 控制 修改/保存
        isAdd: true,
        // 弹出层标题
        title: "",
        // 表单参数
        data: {},
        // 规则
        rules: {
          // API编码
          apiCode: [
            { required: true, message: "API编码不可以为空", trigger: "blur" },
            {
              min: 1,
              max: 32,
              message: "API编码的长度最多 32 个字符",
              trigger: "blur",
            },
          ],
          // API服务名
          apiName: [
            { required: true, message: "API服务名不可以为空", trigger: "blur" },
            {
              min: 1,
              max: 64,
              message: "API服务名的长度最多 64 个字符",
              trigger: "blur",
            },
          ],
          apiDesc: [
            { required: true, message: "API描述不可以为空", trigger: "blur" },
          ],
          // API类型
          apiType: [
            { required: true, message: "API类型不可以为空", trigger: "blur" },
          ],
          // 所属应用
          appId: [
            { required: true, message: "所属应用不可以为空", trigger: "blur" },
          ],
          // 请求路径
          apiUrl: [
            { required: true, message: "请求路径不可以为空", trigger: "blur" },
          ],
          // 服务方式
          wsOperation: [
            {
              required: true,
              message: "服务方式不可以为空",
              trigger: "change",
            },
          ],
          wsdlUrlOrigin: [
            {
              required: true,
              message: "WSDL来源不可以为空",
              trigger: "blur",
            },
          ],
          // 超时时间
          timeoutSecs: [
            { required: true, message: "超时时间不可以为空", trigger: "blur" },
          ],
          jmsDatasourceCode: [
            { required: true, message: "JMS数据源不可以为空", trigger: "blur" },
          ],
          jmsDestinationName: [
            { required: true, message: "名称不可以为空", trigger: "blur" },
          ],
          // 响应时间
          alarmSecs: [
            { required: true, message: "响应时间不可以为空", trigger: "blur" },
          ],
          // 失败重试次数
          retryTimes: [
            {
              required: true,
              message: "失败重试次数不可以为空",
              trigger: "blur",
            },
          ],
          // 请求方式
          httpRequestMethod: [
            { required: true, message: "请求方式不可以为空", trigger: "blur" },
          ],
        },
      },
      testForm: {
        // 控制 dialog
        open: false,
        // 弹出层标题
        title: "测试Api接口",
        // 表单参数
        data: {},
      },
      // 新增请求头/响应头弹窗
      qqtForm: {
        isAdd: true,
        open: false,
        title: "",
        state: "req",
        // 表单参数
        data: {},
        // 规则
        rules: {
          // 参数类型
          nodeType: [
            { required: true, message: "参数类型不可以为空", trigger: "blur" },
          ],
          elementType: [
            { required: true, message: "元素类型不可以为空", trigger: "blur" },
          ],
          // 参数名称
          nodeName: [
            { required: true, message: "参数名不可以为空", trigger: "blur" },
          ],
          // 参数描述
          nodeLabel: [
            { required: true, message: "参数描述不可以为空", trigger: "blur" },
          ],
          // 字段校验规则
          // nodeCheckRegex: [
          //   { required: true, message: '校验规则不可以为空', trigger: 'blur' }
          // ],
        },
      },
      // 新增输入/输出参数弹窗
      inputForm: {
        // 是否添加属性
        isAttr: false,
        // 控制 dialog
        open: false,
        // 弹出层标题
        title: "",
        // 父节点
        parentNode: "根节点",
        // 父节点Id
        nodeParentId: "0",
        // 输入/输出状态
        state: "input",
        // 表单参数
        data: {},
        // 规则
        rules: {
          // 参数类型
          nodeType: [
            { required: true, message: "参数类型不可以为空", trigger: "blur" },
          ],
          elementType: [
            { required: true, message: "元素类型不可以为空", trigger: "blur" },
          ],
          // 参数名称
          nodeName: [
            { required: true, message: "参数名不可以为空", trigger: "blur" },
          ],
          // 参数描述
          nodeLabel: [
            { required: true, message: "参数描述不可以为空", trigger: "blur" },
          ],
          // 字段校验规则
          // nodeCheckRegex: [
          //   { required: true, message: '校验规则不可以为空', trigger: 'blur' }
          // ],
        },
      },
      // 升级接口API弹窗
      upgradeForm: {
        // 升级
        isUpgrade: false,
        isEdit: false,
        // 控制 dialog
        open: false,
        // 弹出层标题
        title: "",
        // 表单参数
        data: {},
        // 规则
        rules: {
          // 服务URL
          apiUrl: [
            { required: true, message: "服务URL不可以为空", trigger: "blur" },
          ],
          // 请求方式
          httpRequestMethod: [
            { required: true, message: "请求方式不可以为空", trigger: "blur" },
          ],
          // 升级说明
          apiVerDesc: [
            { required: true, message: "升级说明不可以为空", trigger: "blur" },
          ],
        },
      },
      // 升级接口API弹窗
      editionForm: {
        // 控制 dialog
        open: false,
        // 遮罩层
        loading: false,
        // 弹出层标题
        title: "查看API接口版本",
        // 表单参数
        data: {},
        // 是否需修改
        isAdd: false,
        // 表单列表数据
        list: [],
      },
      // 上传JSON参数
      upload: {
        // 是否显示弹出层（上传JSON参数）
        open: false,
        // 弹出层标题（上传JSON参数）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { [defaultSettings.tokenName]: 'Bearer ' + getToken() },
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 上传的地址
        url: import.meta.env.VITE_APP_BASE_API + "/conn/api/importApi",
        // 上传的ID（为空表示创建）
        ids: null,
      },
      fileList: [],
      editor: null,
      editorConfig: { placeholder: '请输入内容...', MENU_CONF: {} },
      mode: 'dark',
    };
  },
  watch: {
    "inputForm.open"(val) {
      if (!val) {
        this.inputForm.title = "";
        this.inputForm.isAttr = false;
        this.inputForm.parentNode = "根节点";
        this.inputForm.nodeParentId = "0";
        this.inputForm.state = "in";
        this.inputReset();
      }
    },
    "editForm.open"(val) {
      if (!val) {
        this.upgradeForm.isUpgrade = false;
        this.upgradeForm.isEdit = false;
        this.editForm.title = "";
        this.editForm.stepIndex = 0;
        this.editForm.maxIndex = 0;
        this.editForm.isAdd = true;
        this.reset();
      }
    },
    "upgradeForm.open"(val) {
      if (!val) {
        this.upgradeForm.data = {};
      }
    },
    "inputForm.data"(val) {},
    "testForm.open"(val) {
      if (!val) {
        this.inputList = [];
      }
    }
  },
  created() {
    // 查询列表
    this.getList();
    this.getAllList();
    this.getDicts("uni_element_type").then((response) => {
      this.elementTypeList = response.data;
    });
    // 获取数据字典：conn_protocol_type
    this.getDicts("conn_protocol_type").then((response) => {
      this.apiTypeOptions = response.data;
      console.log('apiTypeOptions',this.apiTypeOptions)
    });
  },
  mounted() {
    Prism.highlightAll();
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    highlighter(code) {
      return highlight(code, languages.js); //returns html
    },
    //实体模型选择 选择建模-现有模板 - 下拉框
    getModelEntityList() {
      selectAllParentEntity().then(response => {
        console.log('response.data', response.data)
        this.modelEntityList = response.data
      })
    },
    cancelModelEntity() {
      this.modelEntityForm.open = false
    },
     resetModelEntityForm(){
      this.modelEntityForm.data = {
        // 主键ID
        entityId: undefined,
      };
      // 重置字段校验
      this.$refs.modelEntityFormRef && this.$refs.modelEntityFormRef.clearValidate();
      this.resetForm("modelEntityFormRef");
    },
     // 确定按钮
    inParamInsertModelParam: debounceWrapper(function (data) {
      this.$refs['modelEntityFormRef'].validate((valid) => {
        if (valid) {
          const params = {
            entityId: this.modelEntityForm.data.entityId,
            apiVerId: this.editForm.data.apiVerId,
            apiId: this.editForm.data.apiId,
            apiVersion: this.editForm.data.apiVersion
          }
          api.inParamInsertModelParam(params).then((res) => {
            this.msgSuccess("创建成功");
            this.getSearchTree(
              this.editForm.data.apiId,
              this.editForm.data.apiVerId
            );
          });
          this.modelEntityForm.open = false
        }
      })
    }),
    // 左侧应用列表调用
    getAppList(val) {
      this.btnVal = val;
      this.queryParams.pageNum = 1;
      if (this.btnVal == 0) {
        this.appNameLike = "";
        this.queryParams.appId = "";
        this.getList();
        this.getAllList();
      } else {
        this.queryParams.appId = this.applicationList[this.btnVal].appId;
        this.getList();
      }
    },
    // 查询列表
    getList: debounceWrapper(function () {
      this.loading = true;
      api.search(this.queryParams).then((response) => {
        this.$nextTick(() => {
          //获取右侧动态盒子高度，赋值给左侧
          let height = this.$refs.rightRef.offsetHeight;
          this.leftHeight = height;
        });
        this.dataList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    }),
    // 查询应用列表
    getAllList: debounceWrapper(function () {
      this.allLoading = true;
      listAppAll(this.appNameLike).then((response) => {
        this.applicationList = [{ appName: "所有应用" }];
        this.applicationList = this.applicationList.concat(response.data);
        this.allLoading = false;
      });
    }),
    // 请求头参数列表
    getReqHeaderList(apiId, apiVerId, apiVersion) {
      this.SearchLoading = true;
      this.reqHeaderList = [];
      api.reqHeaderSearch({ apiId, apiVerId, apiVersion }).then((response) => {
        this.reqHeaderList = response.data;
        this.SearchLoading = false;
      });
    },
    // 响应头参数列表
    getResHeaderList(apiId, apiVerId, apiVersion) {
      this.SearchLoading = true;
      this.resHeaderList = [];
      api.resHeaderSearch({ apiId, apiVerId, apiVersion }).then((response) => {
        this.resHeaderList = response.data;
        this.SearchLoading = false;
      });
    },
    // 查询输入参数列表
    getSearchTree: debounceWrapper(function (apiId, apiVerId) {
      this.SearchLoading = true;
      this.inputList = [];
      api.searchTree({ apiId, apiVerId }).then((response) => {
        this.inputList = response.data;
        this.SearchLoading = false;
      });
    }),
    // 查询输出参数列表
    getoutSearchTree: debounceWrapper(function (apiId, apiVerId) {
      this.insertLoading = true;
      this.insertList = [];
      api
        .outSearchTree({ apiId: apiId, apiVerId: apiVerId })
        .then((response) => {
          this.insertList = response.data;
          this.insertLoading = false;
        });
    }),
    // 查询版本列表参数
    getEditionList: debounceWrapper(function () {
      this.editionForm.list = [];
      api.searchAllByEntity(this.editionForm.data.apiId).then((response) => {
        this.editionForm.list = response.data || [];
        this.editionForm.loading = false;
      });
    }),
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 下一步按钮操作  stepIndex 步骤条进度; val 1：暂存 2：下一步
    async nextStep(val) {
      let stepIndex = this.editForm.stepIndex;
      let maxIndex = this.editForm.maxIndex;

      if (stepIndex == 0) {
        if (!this.disable) {
          if (
            this.editForm.data.apiType == "1" &&
            this.wsOperationList.length == 0
          ) {
            this.fileList.length == 0 &&
              this.$message.error("请上传WSDL文件！");
          }
          this.$refs["formRef"].validate(async (valid) => {
            if (!valid) return;
            let promise;
            if (this.upgradeForm.isUpgrade) {
              promise = api.upgradeApi;
            } else if (this.upgradeForm.isEdit) {
              promise = api.updateReturnId;
            } else {
              promise = this.editForm.isAdd
                ? api.insertReturnId
                : api.updateReturnId;
            }
            const response = await promise(this.editForm.data);
            if (response.code === "200") {
              if (val == 1) {
                if (this.upgradeForm.isUpgrade || this.upgradeForm.isEdit) {
                  this.getEditionList();
                }
                this.editForm.open = false;
                this.handleQuery();
                return;
              }
              this.editForm.data.apiId = response.data.apiId;
              this.editForm.data.apiVerId = response.data.apiVerId;
              response.data.apiVersion &&
                (this.editForm.data.apiVersion = response.data.apiVersion);

              this.getReqHeaderList(
                this.editForm.data.apiId,
                this.editForm.data.apiVerId,
                this.editForm.data.apiVersion
              );
              this.getResHeaderList(
                this.editForm.data.apiId,
                this.editForm.data.apiVerId,
                this.editForm.data.apiVersion
              );
              this.editForm.stepIndex++;
              stepIndex + 1 > maxIndex
                ? this.editForm.maxIndex++
                : this.editForm.maxIndex;
            }
          });
        } else {
          this.getReqHeaderList(
            this.editForm.data.apiId,
            this.editForm.data.apiVerId,
            this.editForm.data.apiVersion
          );
          this.getResHeaderList(
            this.editForm.data.apiId,
            this.editForm.data.apiVerId,
            this.editForm.data.apiVersion
          );
          this.editForm.stepIndex++;
          stepIndex + 1 > maxIndex
            ? this.editForm.maxIndex++
            : this.editForm.maxIndex;
        }
      } else if (stepIndex == 1) {
        this.getSearchTree(
          this.editForm.data.apiId,
          this.editForm.data.apiVerId
        );
        this.editForm.stepIndex++;
        stepIndex + 1 > maxIndex
          ? this.editForm.maxIndex++
          : this.editForm.maxIndex;
      }
      if (this.steps[stepIndex].key === "SRCS") {
        await api
          .updateRowNotNullById({
            apiVerId: this.editForm.data.apiVerId,
            apiParamsBody: this.apiParamsBody,
            inparamWithAttr: this.inparamWithAttr ? "Y" : "N",
          })
          .then(() => {
            this.getoutSearchTree(
              this.editForm.data.apiId,
              this.editForm.data.apiVerId
            );
            this.editForm.stepIndex++;
            stepIndex + 1 > maxIndex
              ? this.editForm.maxIndex++
              : this.editForm.maxIndex;
          });
      } else if (this.steps[stepIndex].key === "SCCS") {
        api
          .updateRowNotNullById({
            apiVerId: this.editForm.data.apiVerId,
            outparamWithAttr: this.outparamWithAttr ? "Y" : "N",
          })
          .then(() => {
            this.editForm.stepIndex++;
            stepIndex + 1 > maxIndex
              ? this.editForm.maxIndex++
              : this.editForm.maxIndex;
            api
              .selectById(
                this.editForm.data.apiId,
                this.editForm.data.apiVersion
              )
              .then((res) => {
                if (res.code == "200") {
                  this.editForm.data.apiCode = res.data.apiCode;
                  this.editForm.data.contentId = res.data.contentId;
                }
              });
          });
      }
      if (val == 1 && stepIndex !== 0) {
        if (this.upgradeForm.isUpgrade || this.upgradeForm.isEdit) {
          this.getEditionList();
        }
        this.editForm.open = false;
        this.handleQuery();
      }
    },
    // 步骤条按钮操作
    previousStep(val) {
      if (val < this.editForm.maxIndex + 1) {
        this.editForm.stepIndex = val;
      }
    },
    // 表单重置
    reset() {
      this.editForm.stepIndex = 0;
      this.editForm.maxIndex = 0;
      this.editForm.isAdd = true;
      this.editForm.data.wsOperation = "";
      this.wsOperationList = [];
      this.editForm.data = {
        // API主键
        apiId: "",
        // API编码
        apiCode: "",
        // API服务名
        apiName: "",
        // 所属应用
        appId: "",
        // 接口类型
        apiType: "",
        // 请求路径
        apiUrl: "",
        jmsDatasourceCode: '',
        jmsDestinationName: '',
        jmsType: 'queue',
        jmsRole: 'C',
        // 超时时间
        timeoutSecs: "0",
        // 响应时间
        alarmSecs: "120",
        // 失败重试次数
        retryTimes: "0",
        // 请求方式
        httpRequestMethod: "POST",
        wsdlUrlOrigin: "N",
      };
      // 重置字段校验
      this.$refs.formRef && this.$refs.formRef.clearValidate();
      this.resetForm("formRef");
    },
    // 表单重置
    inputReset() {
      this.inputForm.isAdd = true;
      this.qqtForm.state = "req";
      this.inputForm.data = {
        // 版本主键id
        apiVerId: this.editForm.data.apiVerId || "",
        // 主键id
        apiId: this.editForm.data.apiId || "",
        apiVersion: this.editForm.data.apiVersion || "",
        // 输入类型
        nodeType: "",
        elementType: "",
        // 输入参数名
        nodeName: "",
        // 参数描述
        nodeLabel: "",
        // 节点是否必须
        nodeNeededable: true,
        // 字段值校验正则表达式
        nodeCheckRegex: "",
        // 节点是否必填
        nodeValueable: true,
        // 是否成功标识
        isSuccessFlag: false,
        // 成功的值
        successValue: '',
      };
      // 重置字段校验
      this.$refs.inputformRef && this.$refs.inputformRef.clearValidate();
      this.resetForm("inputformRef");
    },
    qqtRest() {
      this.qqtForm.isAdd = true;
      this.qqtForm.data = {
        // 版本主键id
        apiVerId: this.editForm.data.apiVerId || "",
        // 主键id
        apiId: this.editForm.data.apiId || "",
        apiVersion: this.editForm.data.apiVersion || "",
        // 输入类型
        nodeType: "",
        // 输入参数名
        nodeName: "",
        // 参数描述
        nodeLabel: "",
        // 节点是否必须
        nodeNeededable: true,
        // 字段值校验正则表达式
        nodeCheckRegex: "",
        // 节点是否必填
        nodeValueable: true,
      };
      // 重置字段校验
      this.$refs.qqtformRef && this.$refs.qqtformRef.clearValidate();
      this.resetForm("qqtformRef");
    },
    // 新增按钮操作
    handleAdd() {
      this.disable = false;
      this.fileList = [];
      this.reset();
      listAppAll().then((response) => {
        this.applicationOptions = response.data;
        this.editForm.data.appId = this.queryParams.appId;
      });
      this.editForm.open = true;
      this.editForm.title = "新增源服务API";
    },
    // 查看详情
    handleView(row, showVersion) {
      this.rowInfo = row;
      this.showVersion = showVersion === "showVersion";
      this.viewVisible = true;
      api.selectById(row.apiId, row.apiVersion).then((response) => {
        this.rowInfo = response.data;
      });
    },
    // 查看详情
    handleExport(row) {
      this.downloadUrl(import.meta.env.VITE_APP_GATEWAY_URL + "/conn/api/exportApi/" + row.apiId );
      this.msgSuccess("正在启动导出......");
    },
    handleExportWSDL(row) {
      this.downloadUrl(import.meta.env.VITE_APP_GATEWAY_URL + "/conn/public/download/wsdl/" + row.wsdlContentId);
      this.msgSuccess("正在启动导出......");
    },
    qqtAdd(row, state, title) {
      this.qqtRest();
      this.qqtForm.state = state;
      this.qqtForm.title = title;
      this.qqtForm.open = true;
    },
    qqtModify(row, state, title) {
      this.qqtAdd(row, state, title);
      this.qqtForm.isAdd = false;
      this.qqtForm.data = {
        apiVerId: row.apiVerId || this.editForm.data.apiVerId,
        apiId: row.apiId || this.editForm.data.apiId,
        apiVersion: row.apiVersion || this.editForm.data.apiVersion,
        nodeType: row.nodeType,
        nodeName: row.nodeName,
        nodeLabel: row.nodeLabel,
        nodeNeededable: row.nodeNeededable === "Y" ? true : false,
        nodeId: row.nodeId,
        headerId: row.headerId,
        nodeCheckRegex: row.nodeCheckRegex,
        nodeValueable: row.nodeValueable === "Y" ? true : false,
      };
    },
    handleQqtDelete(deleteIds, key) {
      let fn;
      key === "req"
        ? (fn = api.reqInDeleteByIds)
        : (fn = api.resOutDeleteByIds);
      fn(deleteIds * 1)
        .then(() => {
          this.msgSuccess("删除成功");
          key === "req"
            ? this.getReqHeaderList(
                this.editForm.data.apiId,
                this.editForm.data.apiVerId,
                this.editForm.data.apiVersion
              )
            : this.getResHeaderList(
                this.editForm.data.apiId,
                this.editForm.data.apiVerId,
                this.editForm.data.apiVersion
              );
        })
        .catch(function () {});
    },
    // 输入输出 新增按钮操作
    inputAdd(row, state, title, isAttr) {
      this.inputForm.open = true;
      this.inputForm.nodeParentId = row.nodeId ? row.nodeId : 0;
      this.inputForm.parentNode = row.nodeName
        ? `${row.nodeName}(${row.nodeLabel})`
        : "根节点";
      this.inputForm.state = state;
      this.inputForm.title = title;
      this.inputForm.isAttr = isAttr;
      this.inputReset();
    },
    // 修改输入参数
    modify(row, state, title) {
      this.inputReset();
      api.inSelectById(row.nodeId).then((res) => {
        if (!res.data) return;
        this.inputForm.parentNode = `${res.data.nodeName}(${res.data.nodeLabel})`;
      });
      this.inputForm.isAdd = false;
      this.inputForm.open = true;
      this.inputForm.nodeParentId = row.nodeParentId ? row.nodeParentId : 0;
      this.inputForm.state = state;
      this.inputForm.title = state;
      this.inputForm.isAttr = row.isAttr === "Y";
      this.inputForm.data = {
        apiVerId: row.apiVerId || this.editForm.data.apiVerId,
        apiId: row.apiId || this.editForm.data.apiId,
        apiVersion: row.apiVersion || this.editForm.data.apiVersion,
        nodeType: row.nodeType,
        nodeName: row.nodeName,
        nodeLabel: row.nodeLabel,
        nodeAlias: row.nodeAlias,
        nodeNeededable: row.nodeNeededable === "Y" ? true : false,
        nodeId: row.nodeId,
        nodeCheckRegex: row.nodeCheckRegex,
        nodeValueable: row.nodeValueable === "Y" ? true : false,
        isSuccessFlag: row.isSuccessFlag === "Y" ? true : false,
        successValue: row.successValue,
      };
      this.editForm.data.apiVersion = row.apiVersion;
    },
    // 升级API接口参数
    upgradeClick(row, val) {
      this.editionForm.isAdd = val ? true : false;
      this.upgradeForm.open = true;
      this.upgradeForm.data = {
        // 接口编码
        apiCode: row.apiCode,
        // 所属应用
        appName: row.appName,
        // 接口名称
        apiName: row.apiName,
        // API主键
        apiId: row.apiId,
        // 接口版本
        apiVersion: row.apiVersion,
        // 服务URL
        apiUrl: row.apiUrl,
        // 请求方式
        httpRequestMethod: row.httpRequestMethod,
        // 升级说明
        apiVerDesc: row.apiVerDesc,
      };
      // 重置字段校验
      this.$refs.upgradeFormRef && this.$refs.upgradeFormRef.clearValidate();
      this.resetForm("upgradeFormRef");
    },
    // 获取接口版本参数
    editionClick(row) {
      this.editionForm.open = true;
      this.editionForm.data = {
        // 接口编码
        apiCode: row.apiCode,
        // 所属应用
        appName: row.appName,
        // 接口名称
        apiName: row.apiName,
        // API主键
        apiId: row.apiId,
        // 接口版本
        apiVersion: row.apiVersion,
        apiMasterVersion: row.apiMasterVersion,
        // 服务URL
        apiUrl: row.apiUrl,
        // 请求方式
        httpRequestMethod: row.httpRequestMethod,
        // 升级说明
        apiVerDesc: row.apiVerDesc,
      };
      this.getEditionList();
    },
    // 作废
    handleDiscard: debounceWrapper(function (row) {
      if (row) {
        this.editForm.data.apiVersion = row.apiVersion;
        this.editForm.data.apiId = row.apiId;
      }
      let data = {
        apiVersion: this.editForm.data.apiVersion,
        apiId: this.editForm.data.apiId,
      };
      api.discard(data).then((response) => {
        this.msgSuccess("作废成功");
        if (this.editionForm.open) {
          this.getEditionList();
        } else {
          this.getList();
        }
      });
    }),
    // 删除按钮操作 val 1：主页面删除接口 2：弹窗删除输入参数 3：弹窗删除输出参数
    handleDelete: debounceWrapper(function (deleteIds, val) {
      switch (val) {
        case 1:
          api
            .deleteByIds(deleteIds * 1)
            .then(() => {
              this.msgSuccess("删除成功");
              this.getList();
            })
            .catch(function () {});
          break;
        case 2:
          api
            .inDeleteByIds(deleteIds * 1)
            .then(() => {
              this.msgSuccess("删除成功");
              this.getSearchTree(
                this.editForm.data.apiId,
                this.editForm.data.apiVerId
              );
            })
            .catch(function () {});
          break;
        case 3:
          api
            .outDeleteByIds(deleteIds * 1)
            .then(() => {
              this.msgSuccess("删除成功");
              this.getoutSearchTree(
                this.editForm.data.apiId,
                this.editForm.data.apiVerId
              );
            })
            .catch(function () {});
          break;
        case 4:
          api
            .deleteByIdAndVersion(deleteIds)
            .then(() => {
              this.msgSuccess("删除成功");
              this.getEditionList();
            })
            .catch(function () {});
          break;

        default:
          break;
      }
    }),
    // 发布版本
    release: debounceWrapper(function (row, val) {
      if (row) {
        this.editForm.data.apiVerId = row.apiVerId;
      }
      let data = {
        apiVerId: this.editForm.data.apiVerId,
      };

      let pormise = val ? api.versionEnable(data) : api.enable(data);
      pormise.then((response) => {
        if (response.code === '200') {
          this.msgSuccess("发布成功");
          if (this.editionForm.open) {
            this.getEditionList();
          } else {
            this.getList();
          }
          this.editForm.open = false;
        }
      });
    }),
    // 设置版本为默认
    masterClick: debounceWrapper(function (row) {
      api
        .master({ apiId: row.apiId, apiVersion: row.apiVersion })
        .then((response) => {
          this.editionForm.data.apiMasterVersion = row.apiVersion;
          this.msgSuccess("设置成功");
          this.getEditionList();
        });
    }),
    // 撤销
    revokeClick: debounceWrapper(function (row) {
      if (row) {
        this.editForm.data.apiVersion = row.apiVersion;
        this.editForm.data.apiId = row.apiId;
      }
      let data = {
        apiVersion: this.editForm.data.apiVersion,
        apiId: this.editForm.data.apiId,
      };
      api.revoke(data).then((response) => {
        this.msgSuccess("撤销成功");
        if (this.editionForm.open) {
          this.getEditionList();
        } else {
          this.getList();
        }
      });
    }),
    // 点击版本种升级按钮
    upgradeVersion(row) {
      this.upgradeForm.isUpgrade = true;
      this.reviseUpdate(row);
    },
    editVersion(row) {
      this.upgradeForm.isEdit = true;
      this.reviseUpdate({
        ...row,
        apiStatus: row.apiVerStatus,
      });
    },
    // 修改按钮操作
    reviseUpdate: debounceWrapper(function (row, disable) {
      this.disable = disable ? true : false;
      this.reset();
      this.editForm.isAdd = false;
      listAppAll().then((response) => {
        this.applicationOptions = response.data;
      });
      this.apiTypeChange(row.apiType)
      api.selectById(row.apiId, row.apiVersion).then((response) => {
        this.editForm.data = response.data;
        this.apiParamsBody = response.data.apiParamsBody;
        this.inparamWithAttr = response.data.inparamWithAttr === "Y";
        this.outparamWithAttr = response.data.outparamWithAttr === "Y";
        this.fileList = [{ name: response.data.contentName }];
        !this.disable && this.getWsOperationNames();
        this.editForm.open = true;
        !disable && (this.editForm.title = "修改源服务API");
        disable && (this.editForm.title = "源服务API详细");
        this.upgradeForm.isUpgrade && (this.editForm.title = "源服务API升级");
        this.upgradeForm.isEdit && (this.editForm.title = "源服务API修改");
      });
    }),
    // 打开测试弹窗
    testUpdate: debounceWrapper(function (row) {
      this.reset();
      this.editForm.data.apiVersion = row.apiVersion;
      this.editForm.data.apiId = row.apiId;
      api.selectById(row.apiId, row.apiVersion).then((response) => {
        this.editForm.data = response.data;
        this.inputList = response.data.inParamList;
        this.testForm.open = true;
      });
    }),
    submitQqtForm: debounceWrapper(function () {
      this.$refs["qqtformRef"].validate((valid) => {
        if (valid) {
          let data = { ...this.qqtForm.data };
          data.nodeNeededable = this.qqtForm.data.nodeNeededable ? "Y" : "N";
          data.nodeValueable = this.qqtForm.data.nodeValueable ? "Y" : "N";
          data.nodeCheckRegex =
            this.qqtForm.data.nodeType === "string" ||
            data.elementType === "string"
              ? data.nodeCheckRegex
              : "";
          var promise;
          if (this.qqtForm.isAdd) {
            promise =
              this.qqtForm.state === "req"
                ? api.reqInParamInsert(data)
                : api.resOutParamInsert(data);
          } else {
            promise =
              this.qqtForm.state === "req"
                ? api.reqInUpdateById(data)
                : api.resOutUpdateById(data);
          }
          promise.then((response) => {
            if (response.code === "200") {
              this.qqtForm.open = false;
              this.msgSuccess(this.qqtForm.isAdd ? "新增成功" : "修改成功");
              if (this.steps[this.editForm.stepIndex].key === "QQT") {
                if (this.qqtForm.state === "req") {
                  this.getReqHeaderList(
                    this.editForm.data.apiId,
                    this.editForm.data.apiVerId,
                    this.editForm.data.apiVersion
                  );
                } else if (this.qqtForm.state === "res") {
                  this.getResHeaderList(
                    this.editForm.data.apiId,
                    this.editForm.data.apiVerId,
                    this.editForm.data.apiVersion
                  );
                }
              }
            }
          });
        }
      });
    }),
    inParamQuickInsertHandler(item) {
      const data = {
        // 版本主键id
        apiVerId: this.editForm.data.apiVerId || "",
        // 主键id
        apiId: this.editForm.data.apiId || "",
        apiVersion: this.editForm.data.apiVersion || ""
      }
      
      switch(item) {
        case 'batchInsert':
          this.batchInVisible = true;
          break;
        case 'pageParam':
          this.inParamInsertPageParam(data);
          break;
        case 'modelEntity':
          this.resetModelEntityForm();
          this.modelEntityForm.open = true;
          this.modelEntityForm.title = '选择实体模型';
          this.getModelEntityList();
          break;
      }
    },
    inParamInsertPageParam: debounceWrapper(function(data) {
      api.inParamInsertPageParam(data).then((res) => {
        this.msgSuccess("创建成功");
        this.getSearchTree(
          this.editForm.data.apiId,
          this.editForm.data.apiVerId
        );
      });
    }),
    outParamQuickInsertHandler(item) {
      const data = {
        // 版本主键id
        apiVerId: this.editForm.data.apiVerId || "",
        // 主键id
        apiId: this.editForm.data.apiId || "",
        apiVersion: this.editForm.data.apiVersion || ""
      }
      switch(item) {
        case 'batchInsert':
          this.batchOutVisible = true;
          break;
        case 'restDomainString':
          data.elementType='string';
          this.outParamInsertRestDomain(data);
          break;
        case 'restDomainLong':
          data.elementType='long';
          this.outParamInsertRestDomain(data);
          break;
        case 'restDomainDecimal':
          data.elementType='decimal';
          this.outParamInsertRestDomain(data);
          break;
        case 'restDomainBoolean':
          data.elementType='boolean';
          this.outParamInsertRestDomain(data);
          break;
        case 'restDomainObject':
          data.elementType='object';
          this.outParamInsertRestDomain(data);
          break;
        case 'restDomainArray':
          data.elementType='array';
          this.outParamInsertRestDomain(data);
          break;
        case 'restDomainPage':
          data.elementType='page';
          this.outParamInsertRestDomain(data);
          break;
      }
    },
    outParamInsertRestDomain: debounceWrapper(function(data) {
      api.outParamInsertRestDomain(data).then((res) => {
        this.msgSuccess("创建成功");
        this.getoutSearchTree(
          this.editForm.data.apiId,
          this.editForm.data.apiVerId
        );
      });
    }),
    // 提交按钮  stepIndex 步骤条进度;
    submitInputForm: debounceWrapper(function () {
      this.$refs["inputformRef"].validate((valid) => {
        if (valid) {
          let data = { ...this.inputForm.data };
          data.isAttr = this.inputForm.isAttr ? "Y" : "N";
          data.nodeNeededable = this.inputForm.data.nodeNeededable ? "Y" : "N";
          data.nodeValueable = this.inputForm.data.nodeValueable ? "Y" : "N";
          data.isSuccessFlag = this.inputForm.data.isSuccessFlag ? "Y" : "N";
          data.successValue = this.inputForm.data.isSuccessFlag ? this.inputForm.data.successValue : "";
          data.nodeParentId = this.inputForm.nodeParentId;
          data.elementType =
            this.inputForm.data.nodeType === "array" ? data.elementType : "";
          data.nodeCheckRegex =
            this.inputForm.data.nodeType === "string" ||
            data.elementType === "string"
              ? data.nodeCheckRegex
              : "";
          if (this.steps[this.editForm.stepIndex].key === "SRCS") {
            data.apiParamsBody = this.apiParamsBody;
          }
          var promise;
          if (this.inputForm.isAdd) {
            promise =
              this.steps[this.editForm.stepIndex].key === "SRCS"
                ? api.InParamInsert(data)
                : api.InParamOutInsert(data);
          } else {
            promise =
              this.steps[this.editForm.stepIndex].key === "SRCS"
                ? api.inUpdateById(data)
                : api.outUpdateById(data);
          }
          promise.then((response) => {
            if (response.data == 1) {
              this.inputForm.open = false;
              this.msgSuccess(this.inputForm.isAdd ? "新增成功" : "修改成功");
              switch (this.steps[this.editForm.stepIndex].key) {
                case "SRCS":
                  this.getSearchTree(
                    this.editForm.data.apiId,
                    this.editForm.data.apiVerId
                  );
                  break;

                case "SCCS":
                  this.getoutSearchTree(
                    this.editForm.data.apiId,
                    this.editForm.data.apiVerId
                  );
                  break;

                default:
                  break;
              }
            }
          });
        }
      });
    }),
    // 升级按钮
    submitUpgradeForm: debounceWrapper(function () {
      this.$refs["upgradeFormRef"].validate((valid) => {
        if (valid) {
          let promise = this.editForm.isAdd
            ? api.updateRowNotNullById(this.upgradeForm.data)
            : api.upgradeApi(this.upgradeForm.data);
          promise.then((response) => {
            this.upgradeForm.open = false;
            this.msgSuccess(response.data);
            this.getList();
            this.getEditionList();
          });
        }
      });
    }),
    // 取消按钮
    cancel(val) {
      this[val].open = false;
      this.handleQuery();
    },
    beforeUpload(file) {
      if (!this.editForm.data.apiUrl) {
        this.$message.error("请先填写服务URL");
        return false;
      }
      const FILE_NAME = file.name;
      if (FILE_NAME.substring(FILE_NAME.lastIndexOf(".")) !== ".wsdl") {
        this.$message.warning("仅支持.wsdl文件");
        return false;
      }
    },
    async httpRequset(n) {
      this.fileList.push(n.file);
      const res = await api.uploadWsdl({
        file: n.file,
        apiUrl: this.editForm.data.apiUrl,
        contentId: this.editForm.data.contentId,  //修改、升级：此参数有值
        isUpgrade: this.upgradeForm.isUpgrade,   // 升级：为true
      });
      this.editForm.data.contentId = res.data || "";
      this.getWsOperationNames();
    },
    async getWsOperationNames() {
      if (this.editForm.data.apiType == "1") {
        const res = await api.selectWsdlOperationNamesByContentId({
          contentId: this.editForm.data.contentId,
        });
        this.wsOperationList = res.data;
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handleApiUrlChange() {
      // 20231029 Modify by @Fanyc：新版本要求必须上传wsdl，发布CXF接口都从本地获取
      // 编辑  更改url情况wsOperation
      // if (!this.disable) {
      //   if (this.editForm.data.wsOperation) {
      //     this.editForm.data.wsOperation = "";
      //     this.wsOperationList = [];
      //   }
      //   this.getWsOperationNames();
      // }
    },
    onBatchOk(key, val) {
      let fn
      if (key === 'in') {
        fn = api.batchInParamInsert

      } else if (key === 'out') {
        fn = api.batchOutParamInsert
      }
      fn({
        ...val,
        apiVerId: this.editForm.data.apiVerId
      }).then(res => {
        if (res.code === '200') {
          this.msgSuccess('批量新增成功');
          switch (this.steps[this.editForm.stepIndex].key) {
            case "SRCS":
              this.batchInVisible = false
              this.getSearchTree(
                this.editForm.data.apiId,
                this.editForm.data.apiVerId
              );
              break;
            case "SCCS":
              this.batchOutVisible = false
              this.getoutSearchTree(
                this.editForm.data.apiId,
                this.editForm.data.apiVerId
              );
              break;
            default:
              break;
          }
        }
      })
    },
    apiTypeChange(val) {
      if (val == '3') {
        // apiType === jms
        api.getJmsDatasource().then(res => {
          this.jmsDatasource = res.data || []
        })
      }
    },
    // 导入按钮
    uploadHandler(row) {
      this.upload.title = "导入API数据";
      this.upload.ids = (row && row.id) || 'create';
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "上传结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm: debounceWrapper(function () {
      this.$refs.upload.submit();
    }),
    // 更多操作按钮
    async handleAction(command, row) {
      console.log('command',command)
      console.log('row',row)
      if ("export" === command) {
        // 导出
        this.handleExport(row);
      } else if("exportWSDL" === command) {
        this.handleExportWSDL(row, 'showVersion')
      } else if("view" === command) {
        // 详情
        this.handleView(row, 'showVersion')
      } else if("copy" === command) {
        // 复制
        const res = await api.copyApi({ apiId: row.apiId });
        if (res.code === "200") {
          this.$message.success("复制成功！");
          this.handleQuery();
        }
      }
    },
    // 测试按钮
    // submitForm: debounceWrapper(function () {
    //   const promise = api.testApi(this.editForm.data);
    //   promise.then((response) => {
    //     if (response.code === '200') {
    //       this.msgSuccess("测试成功");
    //       this.operationResults = response.data;
    //     } else {
    //       this.operationResults = response.data;
    //     }
    //   });
    // }),
    async checkJson(){

        function delHtmlTag(str) {
            if (str) return str.replace(/<[^>]+>/g, "");
            else return "";
        }


      const res = await api.testApi({
        apiId: this.editForm.data.apiId ,
        apiVersion: this.editForm.data.apiVersion,
        reqBodyBase64:Base64.encode(delHtmlTag(this.editorValue))});
      if (res.code === "200") {
        this.msgSuccess("测试成功");
        this.operationResults =res.data;
      }
    },
    handleChange(value, event) {
      // 当编辑器内容发生变化时触发
      console.log('Change:', value, event);
    },
    handleInput(value) {
      // 当编辑器内容输入时触发
      console.log('Input:', value);
    },
  },
};
</script>

<style lang="scss" scoped>
$border: 1px solid rgba(220, 223, 230, 1);

.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .conn-api-left {
    width: 20%;
    height: 100%;
    margin-right: 10px;

    nav {
      width: 100%;
      height: 60px;
      background-color: rgb(235, 237, 240);
      line-height: 60px;
      color: #000;
      font-size: 18px;
      padding-left: 10px;
    }

    .content {
      width: 100%;
      height: 100%;
      border: $border;
      padding: 10px;

      .conetnt-box {
        width: 100%;
        height: 95%;
        margin-top: 10px;
        overflow: hidden;
        overflow-y: auto;
      }

      .conetnt-btn {
        width: 100%;
        height: 50px;
        border: none;
        text-align: left;
        margin-left: 0;
        color: #000;
      }

      .conetnt-btn:hover {
        background-color: rgb(242, 242, 242) !important;
      }

      .a {
        color: #000;
        background-color: rgb(242, 242, 242);
      }
    }
  }

  .conn-api-right {
    width: calc(80% - 10px);
    height: 100%;
    border: $border;
    padding: 10px;

    .mb8 {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }
}

.open-nav {
  height: 30px;
  line-height: 30px;
  display: flex;
  font-size: 16px;
  color: #000;
  margin: 0 0 10px;

  .blue-box {
    background-color: #3ca1ff;
    width: 4px;
    height: 30px;
    margin-right: 6px;
  }
}
.tips {
  color: #999;
  padding: 10px 0 0 10px;
}
.qqt-title {
  display: flex;
  align-items: center;
  gap: 8px;
  .label {
    font-size: 18px;
  }
  .add {
    cursor: pointer;
    font-size: 24px;
    font-weight: 700;
  }
}
.dialog-footer {
  display: block;
  text-align: right;
  margin: 30px 0 20px;
}
:deep(.monaco-editor .no-user-select .mac .showUnused .showDeprecated .vs-dark) {
  width: 100% !important;
  height: 100% !important;
}

</style>
<style lang="scss">
/* required class */
.my-editor {
  background: #2d2d2d;
  color: #ccc;

  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional */
.prism-editor__textarea:focus {
  outline: none;
}

/* not required: */
.height-300 {
  height: 300px;
}
</style>

